<template>
  <div class="home">
      <!-- 头 -->
      <div class="header">
          <div class="left">
              <i class="iconfont iconnew"></i>
          </div>
          <div class="serach" @click="$router.push('/search')">
              <i class="iconfont iconsearch"></i>
              <span>搜索新闻</span>
          </div>
          <div class="right">
              <i class="iconfont iconwode" @click="$router.push('/profile')"></i>
          </div>
      </div>
      <!-- 标签页 -->
    <div class="tab-box">
      <van-icon @click="$router.push('/tab-manage')" class="go-manage" name="arrow-down"/>
      <van-tabs v-model="active" sticky animated swipeable>
          <van-tab :title="item.name" v-for="item in tabList" :key="item.id">
            <van-pull-refresh :success-duration="500" success-text="刷新成功" :animation-duration="500" v-model="item.refreshing" @refresh="onRefresh">

              <van-list
              :offset="50"
              v-model="item.loading"
              :finished="item.finished"
              :immediate-check="false"
              finished-text="没有更多了"
              @load="onLoad">
                <hm-post @click="$router.push(`/post-detail/${post.id}`)" v-for="post in item.posts" :key="post.id" :post="post"></hm-post>
              </van-list>
            </van-pull-refresh>
          </van-tab>

      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: localStorage.getItem('token') ? 1 : 0,
      //   active: 1,
      tabList: [],
      pageSize: 5
    }
  },
  async created () {
    // 优先从本地读取
    const activeTabs = JSON.parse(localStorage.getItem('activeTabs'))
    if (activeTabs) {
      activeTabs.forEach(item => {
        item.posts = []
        item.pageIndex = 1
        item.loading = false
        item.finished = false
        item.refreshing = false
      })
      this.tabList = activeTabs
    } else {
      // 一进入页面就要发送ajax请求, 进行tab栏的数据获取和渲染
      await this.getTabList()
    }
    // 一进入页面, 等tabList回来, 根据this.active 渲染文章
    this.getPostList()
  },
  methods: {
    async getTabList () {
      const res = await this.$axios.get('/category')
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        data.forEach(item => {
          item.posts = []
          item.pageIndex = 1
          item.loading = false
          item.finished = false
          item.refreshing = false
        })
        this.tabList = data
      }
    },
    // 获取分类文章
    async getPostList () {
      // 根据id获取
      const index = this.active
      const id = this.tabList[index].id
      const res = await this.$axios.get('/post', {
        params: {
          category: id,
          pageIndex: this.tabList[index].pageIndex,
          pageSize: this.pageSize
        }
      })
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        this.tabList[index].posts = [...this.tabList[index].posts, ...data]

        this.tabList[index].loading = false

        // 关闭下拉刷新状态
        this.tabList[index].refreshing = false

        if (data.length < this.pageSize) {
          this.tabList[index].finished = true
        }
        // console.log(this.tabList)
      }
    //   console.log(res)
    },
    onLoad () {
      console.log('正在加载')
      const index = this.active
      this.tabList[index].pageIndex++
      this.getPostList()
    },
    async onRefresh () {
      const index = this.active
      console.log('下拉刷新时触发')
      this.tabList[index].loading = true
      this.tabList[index].finished = false
      this.tabList[index].pageIndex = 1
      this.tabList[index].posts = []
      await this.getPostList()
      this.$toast('下拉刷新成功')
    }
  },

  watch: {
    active (index) {
      // 插件小bug
      this.tabList[index].loading = false
      this.tabList[index].finished = false

      if (this.tabList[index].posts.length > 0) return
      this.getPostList()
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
    .header {
        height: 50px;
        line-height: 50px;
        display: flex;
        background-color: #ff0000;
        color: #fff;
        text-align: center;
        .left {
            width: 70px;
            .iconnew {
                font-size: 50px;

            }
        }
        .serach {
            flex:1;
            background-color: rgba(255, 255, 255, 0.5);
            height: 36px;
            line-height: 36px;
            margin-top: 7px;
            border-radius: 18px;
            span {
                font-size: 14px;
                margin-left: 5px;

            }
        }
        .right {
            width: 70px;
            .iconwode {
                font-size: 24px;
            }
        }
    }
     .tab-box {
    // 吸顶的盒子, 在吸顶之前, 是按照标准流来的
    .go-manage {
      position: sticky;
      z-index: 999;
      // top控制吸顶时, 距离顶部的距离
      top: 0px;
      float: right;
      width: 44px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      background-color: #fff;
      font-size: 18px;
    }
  }
}

</style>
<style lang="scss">
// 如果希望样式能够向下渗透到子组件中, 希望只要满足类名就能生效, 不加scoped即可
.home {
  .van-sticky {
    padding-right: 44px;
  }
}
</style>
